<template>
  <div class="common-layout">
    <el-container>
      <el-header class="common-header">
        <AllHead></AllHead>
      </el-header>
      <el-container>

        <el-aside>
          <div class="userHead">
            <label for="userimg">
              <el-link underline="never" class="link">

                <el-image :src="imgSrc" class="userImg" @mouseenter="userImgHover" ></el-image>
                <div v-show="showChangeImg" class="userImg hoverShow" @mouseleave="uesrImgLeave">修改头像</div>

                <!-- <img :src="imgSrc" width="200px" class="userImg"> -->
              </el-link>
            </label>
            <input type="file" id="userimg" @change="changeImg($event)" accept="image/*" >
            <h2>{{ userDetailMessage.nickname }}</h2>
            <p class="MySig">{{ userDetailMessage.bio }}</p>
            <p class="MyFollowAndFans">关注:{{ userDetailMessage.followCount }}   粉丝:{{ userDetailMessage.fansCount }}</p>
          </div>
          
          <div class="userNav">
            <ul>
              <li><router-link active-class="active" :to="{name:'personinformation'}">个人信息</router-link></li>
              <li><router-link active-class="active" :to="{ name: 'myrecipe',}">我的食谱</router-link></li>
              <li><router-link active-class="active" :to="{ name: 'informationform' ,}">健康信息</router-link></li>
              <li><router-link active-class="active" :to="{ name: 'myfocus' ,}">我的关注</router-link></li>
              <li><router-link active-class="active" :to="{ name: 'mycollect' ,}">我的收藏</router-link></li>
              <li><router-link :to="{}">设置</router-link></li><!-- 记得加上去 -->
            </ul>
          </div>
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import AllHead from './AllHead.vue';
import axios from 'axios';
import { ElLoading, ElMessage } from 'element-plus';

interface userDetailMe{
  avatarUrl:string
  bio:string
  createTime:string
  email:string
  fansCount:number
  followCount:number
  gender:string
  id:number
  isAdmin:string
  nickname:string
  phoneNum:string
  recipeCount:number
  status:string
}
let userDetailMessage:userDetailMe = reactive({
  avatarUrl:'',
  bio:'',
  createTime:'',
  email:'',
  fansCount:0,
  followCount:0,
  gender:'',
  id:0,
  isAdmin:'',
  nickname:'',
  phoneNum:'',
  recipeCount:0,
  status:''
})
axios({
  url: '/api/user/getDetailUserInfo',
}).then(res => {
  Object.assign(userDetailMessage, res.data.data)
  console.log(userDetailMessage);
})

//  axios({
//   url: '/api/user/getPastUserInfo',
// }).then(res => {
//   Object.assign(userMessage, res.data.data)
//   console.log(userMessage);
// })


// interface userMe {
//   id: number
//   nickname: string
//   avatarUrl: string
//   isAdmin: number
// }
// let userMessage: userMe = reactive({
//   id: 0,
//   nickname: '加载中',
//   avatarUrl: '',
//   isAdmin: 0
// })




let imgSrc = ref('')//记得改回用户修改图片
async function changeImg(e: any) {
  const fd = new FormData()
  // 往formData中添加参数
  fd.append('file', e.target.files[0])
  if(e.target.files[0]==undefined){
    return
  }
  axios({
    url: '/api/image/upload',
    method: 'post',
    data: {
      file:e.target.files[0],
      type:'cooking'
    },
    // 传输图片专属头
    headers: { 'Content-Type': 'multipart/form-data', }

  }).then(res => {
    console.log(res.data.data);
    
    imgSrc.value = 'http://'+res.data.data
  })
}




let showChangeImg = ref(false)
function userImgHover(){
  showChangeImg.value = true
}
function uesrImgLeave(){
  showChangeImg.value = false
}
</script>




















<style scoped>
.MySig {
  font-size: 1vw;
  color: #999;
}
.MyFollowAndFans{
  font-size: 0.8vw;
  color: #999;

}

.common-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #FFF9F0;
}

.el-container {
  flex: 1;
  display: flex;
}



.common-header {
  height: 80px;
  background: #FFF9F0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-container {
  flex: 1;
  display: flex;
}

.el-aside {
  width: 280px;
  padding: 20px;
  padding-bottom: 0;
  padding-top: 0;
  background: white;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.el-main {
  padding: 15px;
  background-color: #FFFCF5;
}

#userimg {
  display: none;
}
.userImg {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid #FFE8CC;
  object-fit: cover;
  transition: all 0.3s ease;
}

.userImg:hover {
  transform: scale(1.05);
}
.link{
  position: relative;
}
.hoverShow{
  width: 115px;
  height: 115px;
  text-align: center;
  line-height: 115px;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.1);
}
.userHead {
  text-align: center;
  padding: 20px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}



.MySig {
  font-size: 14px;
  color: #999;
  margin-top: 8px;
}

.userNav {
  padding: 5px 0;
}

.userNav ul {
  padding: 0;
  margin: 0;
}

.userNav li {
  list-style: none;
  margin: 8px 0;
}

.userNav a {
  display: block;
  padding: 12px 20px;
  color: #333;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.userNav a:hover {
  background-color: #FFF2E5;
  color: #FF6B35;
  transform: translateX(5px);
}

.userNav .active {
  background-color: #FFE8CC;
  color: #FF6B35;
  font-weight: 500;
}


</style>
